<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";
include "../DBManager.php";
require '../vendor/autoload.php';

use Overtrue\ChineseCalendar\Calendar;

// -----------------------------------------------------------------------------
// 对象初始化
// -----------------------------------------------------------------------------

$dbPath = "../" . $dbPath; // 不加这行语句的话会报错，提示找不到对应路径
$db = new DBManager("sqlite:" . $dbPath);

$calendar = new Calendar();

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>每月重复 - 农历</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container 开始 -->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item"><a class="text-decoration-none" href="specify.php"><?php echo $linkTitleEditRepeatTasks; ?></a></li>
                <li class="breadcrumb-item active">每月重复 - 农历</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div class="mt-3">
        <div class="card">
            <div class="card-header">
                <span>
                    <span role="button" class="badge text-bg-secondary mx-1 my-1 closeAll">折叠</span>
                    <span role="button" class="badge text-bg-secondary mx-1 my-1 openAll">展开</span>
                </span>
            </div>
        </div>
    </div>

    <div class="mt-3">
        <form id="myForm" action="editMonthlyTasksFormAction.php" method="POST">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <?php
                $counter = 1;
                $dayOfMonth = "";
                while ($counter <= 30) {

                    if ($counter < 10) {
                        $dayOfMonth = "0" . $counter;
                    } else {
                        $dayOfMonth = $counter;
                    }

                    $dayOfMonthChinese = $calendar->toChinaDay($dayOfMonth);

                    $content = $db->readFromMonthlyLunar($dayOfMonth);
                    echo <<<BBB
                        <div class="col mt-3">
                            <div class="card">
                            
                                <div class="card-header d-flex" role="button">
                                    <span class="fw-bold w-100">
                                        每月<span class="text-danger fw-bold">$dayOfMonthChinese</span>
                                    </span>
                                    <span class="flex-shrink-0">
                                        <span role="button" class="badge text-bg-dark mt-1 mb-1 btnSave">保存</span>
                                    </span>
                                </div>
                                
                                <div class="card-body">
                                    <textarea tabindex="{$counter}"
                                              data-dayofmonth="{$dayOfMonth}"
                                              class="form-control" 
                                              rows="10">$content</textarea>
                                </div>
                                
                            </div>
                        </div>
                    BBB;
                    $counter += 1;
                };
                ?>
            </div>
        </form>
    </div>

</div>
<!-- div container 结束 -->

<!-- ----------------------------------------------------------------------- -->

<!-- 消息弹窗 开始 -->
<div aria-live="polite" aria-atomic="true" class="position-relative">
    <div class="toast-container position-fixed top-0 start-50 translate-middle-x">

        <div id="toastOne" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div id="toastHeader" class="toast-header bg-info">
                <strong class="me-auto">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body bg-white">
                <p id="msgContent">需要显示的信息。</p>
            </div>
        </div>

    </div>
</div>
<!-- 消息弹窗 结束 -->

<!-- ----------------------------------------------------------------------- -->

<script>

    // 网页加载时自动执行
    // 如果某日指定了重复事件，则设置「相应卡片的标题的背景色」为 bg-info
    $(function() {
        var textareas = $("textarea")
        for (const textarea of textareas) {
            if ($(textarea).val().trim() !== "") {
                $(textarea).parent().prev().addClass("bg-info")
            }
        }
    })

    // 每次编辑重复事件，都检测内容是否为空，并为卡片标题设置相应的背景色
    $(function () {
        $( "textarea" ).on( "focusout keyup", function() {
            if ($(this).val().trim() !== "") {
                $(this).parent().prev().addClass("bg-info")
            } else {
                $(this).parent().prev().removeClass("bg-info")
            }
        })
    })

</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    $(".closeAll").on("click", function () {
        $(".card-body").slideUp("fast")
    })

    $(".openAll").on("click", function () {
        $(".card-body").slideDown("fast")
    })

    $(".card-header").on("click", function(event) {
        $(this).next().slideToggle("fast")
    })

    $("textarea").on("focusout", function () {

        var dayOfMonth = $(this).data("dayofmonth")
        var content = $(this).val().replace( /\r?\n/g, "\r\n" )
        var url = `ajax/writeToMonthlyLunar.php`

        $.post(url, {dayOfMonth: dayOfMonth, content: content})
            .done(function (data) {

                $("#msgContent").text(data)
                // $("#toastHeader").attr("class", "toast-header bg-info")
                const toast = new bootstrap.Toast(toastOne, {"delay": 1000})
                toast.show()

            })
            .fail(function () {
                alert("保存失败！")
            })

    })

    $(".btnClear").on("click", function (e) {

        var textarea = $(this).parent().parent().next().children().first()
        var header = $(this).parent().parent()

        textarea.val("")
        header.removeClass("bg-info")
        textarea.focus()

        e.stopPropagation()

    })

    $(".btnSave").on("click", function (e) {
        e.stopPropagation()
    })

</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 快捷键
    // 参考资料：https://stackoverflow.com/questions/93695/best-cross-browser-method-to-capture-ctrls-with-jquery
    $(window).bind('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch (event.key) {
                case "s":
                case "S":
                    // 按下 ctrl + s 时保存。
                    event.preventDefault();
                    $(":focus").focusout();
                    break;
                case "ArrowUp":
                    // 按下 Ctrl + ↑ 时折叠所有
                    event.preventDefault();
                    $(".closeAll").click();
                    break;
                case "ArrowDown":
                    // 按下 Ctrl + ↓ 时展开所有
                    event.preventDefault();
                    $(".openAll").click();
            }
        }
    });
</script>

<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="../resources/vanilla-back-to-top/index.js"></script>
<script src="../resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
